<template>
    <div class="brand">
        <h2>品牌制造商直供</h2>
        <ul class="imgbox">
            <li v-for="item in brandlistArr" :key="item.id">
                <img :src="item.pic_url" alt="">
                <h4>{{ item.name }}</h4>
                <p>${{ item.floor_price.toFixed(2) }}元</p>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import { ref, defineProps } from 'vue';
import type { Ibrandlistitem } from '@/types/homeType'
const props = defineProps<{
    brandlistArr: Array<Ibrandlistitem>
}>()

</script>
<style lang='scss' scoped>
.brand {
    h2 {
        text-align: center;
    }

    .imgbox {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        li {
            width: 49%;
            position: relative;

            img {
                width: 100%;
            }

            h4 {
                position: absolute;
                left: 40px;
                top: 20px;

            }

            p {
                position: absolute;
                left: 40px;
                top: 45px;
                color: red;
            }
        }
    }

}
</style>